<template>
  <button @click="isShow = true">点击弹窗</button>
  <Teleport to="body">
    <div class="modalPop" v-show="isShow">
      <h3>标题</h3>
      <p>内容</p>
      <button @click="isShow = false">关闭窗口</button>
    </div>
  </Teleport>
</template>

<script setup lang="ts" name="">
import { ref, Teleport } from "vue";
let isShow = ref(false);
</script>

<style scoped>
.modalPop {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  width: 300px;
  height: 150px;
  border: 1px solid #ccc;
  box-shadow: 0 0 10px;
  text-align: center;
}
</style>
